<template>
  <div id="container">
    <span id="title" type="text">Case2 todolist</span>
    <div class="add-container">
      <input id="add-input" v-model="todoText" @keyup.enter="addTodo" placeholder="输入待办项"/>
      <img class="add-btn" @click="addTodo" src="../static/add.png"></img>
    </div>
    <ul>
      <Todo v-for="(todoItem, index) in todoList" :todoItem="todoItem" :index="index"></Todo>
    </ul>
  </div>
</template>

<script>
import Todo from './components/todo'
export default {
  name: 'todoList',
  components: {
    Todo
  },
  data () {
    return {
      todoText: ''
    }
  },
  computed: {
    todoList () {
      return this.$store.getters.todos
    }
  },
  methods: {
    addTodo () {
      this.$store.commit('addTodo', this.todoText)
      this.todoText = ''
    },
    deleteTodo (index) {
      this.$store.commit('deleteTodo', index)
    }
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 30px auto;
}
#title {
  font-size: 60px;
  margin-bottom: 30px;
}
.add-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 80%;
}
#add-input {
  width: 100%;
  height: 85px;
  margin: 10px 10px;
  padding: 0 5px;
  font-size: 40px;
}
.add-btn {
  width: 10%;
  height: 10%;
}
ul {
  list-style: none;
  padding: 0;
  width: 75%;
}
</style>
